<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的资产-划转</title>
    <link rel="stylesheet" href="../assets/css/mui.min.css">
    <!-- 自定义的公共样式表 -->
    <link rel="stylesheet" href="../assets/css/lib.common.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../assets/css/app.css">
    <link rel="stylesheet" href="../assets/css/animate3.1.5.css">
    <script src="../assets/js/mui.min.js"></script>
    <!-- 点击复制文本 -->
    <script src="../assets/js/clipboard.min.js"></script>
    <!-- 自定义的js脚本 -->
    <script src="../assets/js/lib.common.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    [endif]-->
</head>
<body>
<!-- 头部状态栏start -->
<header class="mui-bar mui-bar-nav">
    <a url="./我的资产-交易账户.html" class="mui-icon mui-icon-back dark"></a>
    <h1 class="mui-title black bold">
        我的资产-划转
    </h1>
</header>
<!-- 头部状态栏end -->

<!-- 头部状态栏end -->
<div class="mui-row p_t44 fabi-content ">
    <div class="mui-col-xs-12 mui-col-sm-12 bg-light">
        <div class="mui-slider">
            <div class="mui-scroll-wrapper mui-segmented-control mui-segmented-control-inverted bg-white p_t10">
                <a class="mui-control-item mui-active" href="#item1">
                    USDT
                </a>
                <a class="mui-control-item" href="#item2">
                    BTC
                </a>
                <a class="mui-control-item" href="#item3">
                    ETH
                </a>
            </div>
            <div class="mui-slider-group m_t5">
                <!--USDT-->
                <div id="item1" class="mui-slider-item mui-control-content mui-active bg-white border0"
                     style="height: 800px;">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll p_x10 p_t10">
                            <form id="form1" action="">
                                <input type="hidden" id="type1" name="type" value="0">
                                <div class="mui-row a_c">
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <p>交易(USDT)</p>
                                        <p class="red">0.0</p>
                                    </div>
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <p>合约(USDT)</p>
                                        <p class="red">0.0</p>
                                    </div>
                                </div>
                                <div class="mui-row border">
                                    <div class="mui-col-xs-3 mui-col-sm-3 dark line30 a_c">
                                        <div>
                                            <span class="text-green p_x5">●</span>从
                                        </div>
                                        <div>
                                            <span class="red p_x5">●</span>到
                                        </div>
                                    </div>
                                    <div class="mui-col-xs-6 mui-col-sm-6 black line30 a_c p_x20">
                                        <div id="formText1" style="border-bottom: solid 1px #eee;">交易账户</div>
                                        <div id="toText1">合约账户</div>
                                    </div>
                                    <div class="mui-col-xs-3 mui-col-sm-3">
                                        <div class="bg-light-blue inline w100 a_c line60"
                                             onclick="reverse('formText1','toText1','type1')">
                                            <i class="mui-icon mui-icon-arrowthinup font16 bold line30"></i>
                                            <i class="mui-icon mui-icon-arrowthindown font16 bold line30"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="mui-row p_y20">
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <input id="nums1" name="nums" type="text" class="input-light"
                                               placeholder="请输入划转数量">
                                    </div>
                                    <div class="mui-col-xs-2 mui-col-sm-2 a_c">
                                        <span class="line40 black setAll" data-value="108.052"
                                              data-input-id="nums1">全部</span>
                                    </div>
                                    <div class="mui-col-xs-4 mui-col-sm-4">
                                        <button onclick="__submit('#form1')" type="button"
                                                class="line25 mui-btn mui-btn-primary w100">划转
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <!-- 记录start -->
                            <div class="mui-row">
                                <h4 class="mui-col-xs-12 mui-col-sm-12 p_x10">
                                    财务记录
                                </h4>
                                <div class="mui-col-xs-12 mui-col-sm-12 p_y10">
                                    <table class="table black font14">
                                        <tr>
                                            <th class="text-center black normal font12">
                                                <a href="#">币种</a>
                                            </th>
                                            <th class="text-center black normal font12">
                                                <a href="#">数量</a>
                                            </th>
                                            <th class="text-center black normal font12">
                                                <a href="#">时间</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <td class="text-center">USDT</td>
                                            <td class="text-center">0.00000001</td>
                                            <td class="text-center">2018/08/08</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">WAP</td>
                                            <td class="text-center">0.00150000</td>
                                            <td class="text-center">2018/08/08</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- 记录end-->
                        </div>
                    </div>
                </div>

                <!--BTC-->
                <div id="item2" class="mui-slider-item mui-control-content bg-white border0">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll p_x10 p_t10">
                            <form id="form2" action="">
                                <input type="hidden" id="type2" name="type" value="0">
                                <div class="mui-row a_c">
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <p>交易(USDT)</p>
                                        <p class="red">0.0</p>
                                    </div>
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <p>合约(USDT)</p>
                                        <p class="red">0.0</p>
                                    </div>
                                </div>
                                <div class="mui-row border">
                                    <div class="mui-col-xs-3 mui-col-sm-3 dark line30 a_c">
                                        <div>
                                            <span class="text-green p_x5">●</span>从
                                        </div>
                                        <div>
                                            <span class="red p_x5">●</span>到
                                        </div>
                                    </div>
                                    <div class="mui-col-xs-6 mui-col-sm-6 black line30 a_c p_x20">
                                        <div id="formText2" style="border-bottom: solid 1px #eee;">交易账户</div>
                                        <div id="toText2">合约账户</div>
                                    </div>
                                    <div class="mui-col-xs-3 mui-col-sm-3">
                                        <div class="bg-light-blue inline w100 a_c line60"
                                             onclick="reverse('formText2','toText2','type2')">
                                            <i class="mui-icon mui-icon-arrowthinup font16 bold line30"></i>
                                            <i class="mui-icon mui-icon-arrowthindown font16 bold line30"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="mui-row p_y20">
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <input id="nums2" name="nums" type="text" class="input-light"
                                               placeholder="请输入划转数量">
                                    </div>
                                    <div class="mui-col-xs-2 mui-col-sm-2 a_c">
                                        <span class="line40 black setAll" data-value="8.52"
                                              data-input-id="nums2">全部</span>
                                    </div>
                                    <div class="mui-col-xs-4 mui-col-sm-4">
                                        <button onclick="__submit('#form2')" type="button"
                                                class="line25 mui-btn mui-btn-primary w100">划转
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <!-- 记录start -->
                            <div class="mui-row">
                                <h4 class="mui-col-xs-12 mui-col-sm-12 p_x10">
                                    财务记录
                                </h4>
                                <div class="mui-col-xs-12 mui-col-sm-12 p_y10">
                                    <table class="table black font14">
                                        <tr>
                                            <th class="text-center black normal font12">
                                                <a href="#">币种</a>
                                            </th>
                                            <th class="text-center black normal font12">
                                                <a href="#">数量</a>
                                            </th>
                                            <th class="text-center black normal font12">
                                                <a href="#">时间</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <td class="text-center">BTC</td>
                                            <td class="text-center">0.00000001</td>
                                            <td class="text-center">2018/08/08</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">BTC</td>
                                            <td class="text-center">0.00150000</td>
                                            <td class="text-center">2018/08/08</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- 记录end-->
                        </div>
                    </div>
                </div>

                <!--ETH-->
                <div id="item3" class="mui-slider-item mui-control-content bg-white border0">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll p_x10 p_t10">
                            <form id="form3" action="">
                                <input type="hidden" id="type3" name="type" value="0">
                                <div class="mui-row a_c">
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <p>交易(USDT)</p>
                                        <p class="red">0.0</p>
                                    </div>
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <p>合约(USDT)</p>
                                        <p class="red">0.0</p>
                                    </div>
                                </div>
                                <div class="mui-row border">
                                    <div class="mui-col-xs-3 mui-col-sm-3 dark line30 a_c">
                                        <div>
                                            <span class="text-green p_x5">●</span>从
                                        </div>
                                        <div>
                                            <span class="red p_x5">●</span>到
                                        </div>
                                    </div>
                                    <div class="mui-col-xs-6 mui-col-sm-6 black line30 a_c p_x20">
                                        <div id="formText3" style="border-bottom: solid 1px #eee;">交易账户</div>
                                        <div id="toText3">合约账户</div>
                                    </div>
                                    <div class="mui-col-xs-3 mui-col-sm-3">
                                        <div class="bg-light-blue inline w100 a_c line60"
                                             onclick="reverse('formText3','toText3','type3')">
                                            <i class="mui-icon mui-icon-arrowthinup font16 bold line30"></i>
                                            <i class="mui-icon mui-icon-arrowthindown font16 bold line30"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="mui-row p_y20">
                                    <div class="mui-col-xs-6 mui-col-sm-6">
                                        <input id="nums3" name="nums" type="text" class="input-light"
                                               placeholder="请输入划转数量">
                                    </div>
                                    <div class="mui-col-xs-2 mui-col-sm-2 a_c">
                                        <span class="line40 black setAll" data-value="8.052"
                                              data-input-id="nums3">全部</span>
                                    </div>
                                    <div class="mui-col-xs-4 mui-col-sm-4">
                                        <button onclick="__submit('#form3')" type="button"
                                                class="line25 mui-btn mui-btn-primary w100">划转
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <!-- 记录start -->
                            <div class="mui-row">
                                <h4 class="mui-col-xs-12 mui-col-sm-12 p_x10">
                                    财务记录
                                </h4>
                                <div class="mui-col-xs-12 mui-col-sm-12 p_y10">
                                    <table class="table black font14">
                                        <tr>
                                            <th class="text-center black normal font12">
                                                <a href="#">币种</a>
                                            </th>
                                            <th class="text-center black normal font12">
                                                <a href="#">数量</a>
                                            </th>
                                            <th class="text-center black normal font12">
                                                <a href="#">时间</a>
                                            </th>
                                        </tr>
                                        <tr>
                                            <td class="text-center">ETH</td>
                                            <td class="text-center">0.00000001</td>
                                            <td class="text-center">2018/08/08</td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">ETH</td>
                                            <td class="text-center">0.00150000</td>
                                            <td class="text-center">2018/08/08</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- 记录end-->
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>


</body>

</html>
<script>
    mui('.mui-scroll-wrapper').scroll();

    // 全部数量按钮
    mui(document).on('click', '.setAll', function (e) {
        let {inputId, value} = e.target.dataset;
        document.getElementById(inputId).value = value;
    });

    // 账户类型翻转
    function reverse(formEl, toEl, typeEl) {
        formEl = document.getElementById(formEl);
        toEl = document.getElementById(toEl);
        typeEl = document.getElementById(typeEl);
        let formText = formEl.innerText;
        formEl.innerText = toEl.innerText;
        toEl.innerText = formText;
        typeEl.value = Math.abs(typeEl.value - 1);

    }
</script>